<template>
  <div class='bank'>
     <el-row>
        <el-col :span='12' :offset='6'>
           <!-- <p class='alert'></p> -->
            <el-alert class='alert' title="充值时间：9：00-18：00，请各位商家在规定时间内充值，请各商家提前充值，切记，切记！！！" type="warning" :closable="false">
  </el-alert>
        </el-col>
     </el-row>
     <el-row class='card'>
        <el-col :span='12' :offset='6'>
            <span class='way'>请充值银行卡内：6217 0029 8010 9072 483 刘芳瑛 中国建设银行</span>
        </el-col>
     </el-row>
     <el-row class='input-search'>
         <el-col :span='14' :offset='6'>
              <span>充值金额：</span>
              <el-input size='small' placeholder='请输入充值金额' class='money' v-model='platform.money' onkeyup="this.value=this.value.toString().match(/^\d+(?:\.\d{0,2})?/)"></el-input>
              <span>流水号：</span>
              <el-input size='small' placeholder='请输入流水号' class='card-number' v-model='platform.order' onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
              <span>姓名：</span>
              <!-- onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" -->
              <el-input size='small' placeholder='请输入姓名' class='username' v-model='platform.name'></el-input>
         </el-col>
     </el-row>
     <el-row class='upload'>
         <el-col :span='12' :offset='6'>
              <el-upload
                accept="image/gif,image/jpg,image/png,image/bmp"
                class="upload-demo"
                :limit='1'
                action="api/upload/upload"
                :on-remove="handleRemove"
                :file-list="fileList2"
                :on-success='handleSuccess'
                 :on-exceed="handleExceed"
                 :before-upload="beforeAvatarUpload"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <!-- <span>充值截图：</span>
              <div class='upload-img'>
                    <input type="file" class='img' @change='upload($event)'>
                    <img src="" alt="">
              </div> -->
         </el-col>
     </el-row>
     <el-row class='button'>
          <el-col :span='12' :offset='11'>
               <el-button type="warning" @click='topup'>提交</el-button>
          </el-col>
     </el-row>
       <el-table
      :data="dataList"
      height='550'
      style="width: 100%">
      <el-table-column
        type="index"
        width='50'>
      </el-table-column>
      <el-table-column
        prop="created_time"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="order"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="money"
        label="充值金额">
      </el-table-column>
      <el-table-column
        prop="state"
        label="审核状态">
      </el-table-column>
    </el-table>
      <!-- 分页 -->
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageIndex"
      :page-size="form.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="count"
      style='margin-top:20px;'>
    </el-pagination>
  </div>
  </div>
</template>
<script>
  import {rechargeHistory,recharge,uploadAct} from '@/pages/api/index.js'
export default {
  data(){
    return{
          dataList:[],
          form:{
              type:2,
              pageIndex:1,
              pageSize:10,
          },
          fileList2:[],
          platform:{
               type:2,
               money:'',      //充值金额
               order:'',    //银行卡号
               name:'',       //名字
               img:'',        //充值截图

          },
          count:0,
          successList:'',     //上传成功
          removeList:'',      //移除时
          imgData:{
          //  accept: 'image/gif, image/bmp, image/png, image/jpg',
           accept:['.gif','.bmp','.png','.jpg']
         }
    }
  },
  methods:{
        //初始化
        init(){
           rechargeHistory(this.form).then(res=>{
              if(res.code == 0){
                      res.data.charge.forEach(item => {
                          if(item.state == 0){
                              item.state = '待审核'
                          }else if(item.state == 1){
                             item.state = '审核通过'
                          }else{
                             item.state = '审核拒绝'
                          }
                      })
                      this.dataList = res.data.charge
                      this.count = res.data.count
                 }else{
                    this.$message.warning(res.msg)
                 }
           })
        },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.removeList = file.response.data.id
        if(this.removeList !== '' && this.successList !== ''){
            this.removeList = ''
            this.successList = ''
        }
      },
      handleSuccess(res,file,fileList){
           console.log(res,'res')
        this.successList = res.data.id
      },
       handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
        //充值
        topup(){
          var reg = /^\s*$/g;
            if(reg.test(this.platform.money)){
                  this.$message.warning('请输入金额')
                  return false
            }
            //  var pattern = /^([1-9]{1})(\d{14}|\d{18})$/
            //  if(!pattern.test(this.platform.order.replace(/\s+/g, ""))){
            //          this.$message.warning('请输入正确的银行卡号')
            //          return false
            //   }
            var han = /^[\u4e00-\u9fa5]+$/
            if(!han.test(this.platform.name)){
               this.$message.warning('请输入正确的姓名')
               return false
            }
            if(this.removeList == '' && this.successList == ''){
                 this.$message.warning('请上传图片')
                 return false
            }
            if(this.removeList == '' && this.successList !== ''){
                  this.platform.img = this.successList
            }
             recharge(this.platform).then(res=>{
                 console.log(res,'res')
                 if(res.code == 0){
                     this.$message.success('已提交')
                     this.init()
                 }else{
                     this.$message.error(res.msg)
                 }
             })
        },
          handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
            this.form.pageSize = val
            this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
           this.form.pageIndex = val
           this.init()
      },
      //限制图片格式 accept="image/gif,image/jpg,image/png,image/bmp"
       beforeAvatarUpload(file) {
        var fType = file.name.substr(file.name.lastIndexOf("."))
          let type = file.type
          if(this.imgData.accept.indexOf(fType) == -1){
              this.$message.warning('不能使用除了gif，bmp，png，jpg之外的格式')
              return false
          }
      }
  },
  created(){
       this.init()
  }
}
</script>
<style lang='scss' scoped>
  .bank{
     width:100%;
     background-color: #fff;
     padding:0 20px;
     box-sizing:border-box;
     .alert{
        //  display:inline-block;
        //  padding:20px;
         margin-top:20px;
        //  background-color: #f5dab1;
        //  border-radius:4px;
     }
     .card{
         margin-top:20px;
     }
     .input-search{
         margin-top:20px;
     }
     .money,
     .username{
         width:150px;
         margin-right:30px;
     }
     .card-number{
         width:300px;
         margin-right:30px;
     }
     .upload{
        margin-top:20px;
        >span{
        }
        .upload-img{
          position:relative;
          vertical-align:top;
          display:inline-block;
          width:150px;
          height:100px;
          background-color: #efefef;
          border-radius:4px;
          background-image:url('../images/upload.png');
          background-repeat:no-repeat;
          background-size:50px 50px;
          background-position:center;
          input{
             position:absolute;
             z-index:999;
             left:0;
             top:0;
             width:100%;
             height:100%;
             opacity:0;
          }
          img{
             width:100%;
             height:100%;
          }
        }
     }
     .button{
        // margin-top:30px;
     }
     .block{
        text-align:center;
     }
  }
</style>
